<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/user.css">
</head>

<body>
  <button>动态创建表格</button>
  <!-- <div id="box1">

  </div> -->

  <script>

    // 后端的数据
    var heads = ['姓名', '年龄', '性别', '学号', '薪资', '城市', '操作'];
    var datas = [{
      name: '欧阳霸天',
      age: 19,
      gender: '男',
      stuId: '1001',
      salary: '20000',
      city: '上海'
    },
    {
      name: '令狐霸天',
      age: 19,
      gender: '男',
      stuId: '1001',
      salary: '20000',
      city: '北京'
    },
    {
      name: '诸葛霸天',
      age: 19,
      gender: '男',
      stuId: '1001',
      salary: '20000',
      city: '南京'
    },
    {
      name: '西门霸天',
      age: 19,
      gender: '男',
      stuId: '1001',
      salary: '20000',
      city: '深圳'
    },
    {
      name: '上官霸天',
      age: 19,
      gender: '男',
      stuId: '1001',
      salary: '20000',
      city: '北京'
    },
    {
      name: '欧阳霸天',
      age: 19,
      gender: '男',
      stuId: '1001',
      salary: '20000',
      city: '上海'
    },
    {
      name: '令狐霸天',
      age: 19,
      gender: '男',
      stuId: '1001',
      salary: '20000',
      city: '北京'
    },
    {
      name: '诸葛霸天',
      age: 19,
      gender: '男',
      stuId: '1001',
      salary: '20000',
      city: '南京'
    },
    {
      name: '西门霸天',
      age: 19,
      gender: '男',
      stuId: '1001',
      salary: '20000',
      city: '深圳'
    },
    {
      name: '上官霸天',
      age: 19,
      gender: '男',
      stuId: '1001',
      salary: '20000',
      city: '北京'
    },
    ];



    //获取button 
    let btn = document.querySelector('button');

    btn.addEventListener('click', function () {
      // 查询box1
      let box = document.querySelector('#box1');
      if (box == null) {
        create();
      }
    

    });



    function create() {
      // 创建div 设置div的id值为box1
      let div = document.createElement('div');
      // 设置id
      div.id = 'box1';
      // 创建h3 并且设置颜色 设置字体大小 对齐
      let h3 = document.createElement('h3');
      h3.style.color = '#fff'; // 白色
      h3.style.textAlign = 'center'; // 居中对齐
      h3.style.fontSize = '36px'; // 字体大小
      h3.innerHTML = '就业榜';
      // 给box1 追加子元素节点h3
      div.appendChild(h3);

      // 创建table
      let table = document.createElement('table');
      // 创建头部
      let thead = document.createElement('thead');
      let tr = document.createElement('tr');
      // 动态创建th
      for (let i = 0; i < heads.length; i++) {
        let th = document.createElement('th');
        th.innerHTML = heads[i];
        // 给tr追加th
        tr.appendChild(th);
      }
      // 给thead追加tr
      thead.appendChild(tr);



      // 创建tbody
      let tbody = document.createElement('tbody');

      // 给tbody动态创建tr
      for (let i = 0; i < datas.length; i++) {
        // 创建tr
        let tr = document.createElement('tr');
        // 数组中的每一项是对象
        let tds = datas[i]
        // 给tr 创建多个td
        for (let key in tds) {
          // 创建td
          let td = document.createElement('td');
          // 设置td的内容
          td.innerHTML = tds[key];
          // 给tr追加td
          tr.appendChild(td);
        }

        // 创建td 是最后的删除
        let td = document.createElement('td');
        td.innerHTML = '删除';
        tr.appendChild(td);
        // 给tbody 追加tr
        tbody.appendChild(tr);
      }



      // 给table追加thead
      table.appendChild(thead);
      // 给table追加tbody
      table.appendChild(tbody);
      // 给div 追加table
      div.appendChild(table);

      // 给body追加div
      document.body.appendChild(div);


      // 页面渲染完成后
      tbody.addEventListener('click', function (e = e || window.event) {
        // 是否点击了删除
        if (e.target.innerHTML == '删除') {
          let isDel = confirm('您确定要删除吗?');

          if (isDel) {
            // 删除tr
            e.target.parentNode.remove();
            // tbody是否全部删除
            if (tbody.children.length == 0) {
              // 删除thead
              thead.remove();
              // 删除h3
              h3.remove();
            }
          }

        }
      });

    }












  </script>
</body>

</html>